<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增车位信息</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>

<div id="app">

  <div class="addBrand-container" id="food-add-app">

    <div class="container">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="所属小区" prop="communityName">
          <el-select v-model="ruleForm.communityName" placeholder="请选择所属小区">
            <el-option label="休伯利安" value="休伯利安"></el-option>
            <el-option label="璃月" value="璃月"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="车位编号" prop="code">
          <el-input v-model="ruleForm.code"></el-input>
        </el-form-item>

        <el-form-item label="车位类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择车位类型">
            <el-option label="地面停车场" value="地面停车场"></el-option>
            <el-option label="地下停车场" value="地下停车场"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="起售车位" prop="state" >
          <el-switch v-model="ruleForm.state" ></el-switch>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>

</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<!-- 引入前端响应拦截器 -->
<script src="../../js/request.js"></script>

<script src="../../js/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        ruleForm: {
          //所属小区
          communityName: '',
          //车位编号
          code: '',
          //车位类型
          type: '',
          //车位状态
          state: false
        },
        rules: {
          communityName: [
            { required: true, message: '请选择小区名称', trigger: 'change' }
          ],
          code: [
            { required: true, message: '请输入车位编号', trigger: 'blur' },
          ],
          type: [
            { required: true, message: '请输入车位类型', trigger: 'blur' },
          ]
        }
      };
    },

    created() {
      let id = requestUrlParam('id');
      this.id = id;

      axios({
        url: "http://localhost:8080/parking/one",
        method: 'get',
        params: { id }
      }).then(resp => {
        if (resp.data.result === true) {

          resp.data.data.state = resp.data.data.state === 0;
          resp.data.data.createTime = null;
          resp.data.data.updateTime = null;

          this.ruleForm = resp.data.data
        }
      })
    },

    methods: {
      //新增车位信息
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {

          if(this.ruleForm.state === true){
            this.ruleForm.state = 0;
          }else {
            this.ruleForm.state = 1;
          }

          if (valid) {
            axios({
              url: "http://localhost:8080/parking/add",
              method: 'put',
              data: this.ruleForm
            }).then(resp => {
              if (resp.data.result === true) {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.resetForm('ruleForm')
              } else {
                this.$message({
                  type: 'error',
                  message: resp.data.msg
                });
              }
            })
          } else {
            return false;
          }
        });
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  });
</script>

</body>
</html>